<template>
  <div>
    <el-main>
      <el-tabs v-model="activeName" @tab-click="TabsClick">
        <!-- <el-tab-pane label="未入前30" name="NoInvention">
          <warningtabs @warningExport="warningExport" @getVisit="getVisit" :tableData="tableData"></warningtabs>
        </el-tab-pane>
        <el-tab-pane label="退出前30" name="signOut">
          <warningtabs @warningExport="warningExport" @getVisit="getVisit" :tableData="tableData"></warningtabs>
        </el-tab-pane> -->
        <el-tab-pane label="发明异常" name="abnormal">
          <warningtabs @warningExport="warningExport" @getVisit="getVisit" :tableData="tableData"></warningtabs>
        </el-tab-pane>
        <el-tab-pane label="发明过低" name="tooLow">
          <warningtabs @warningExport="warningExport" @getVisit="getVisit" :tableData="tableData"></warningtabs>
        </el-tab-pane>
        <el-tab-pane label="发明下降" name="decline">
          <warningtabs @warningExport="warningExport" @getVisit="getVisit" :tableData="tableData"></warningtabs>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </div>
</template>

<script>
import Warningtabs from './components/Warningtabs.vue';
import { warningList } from '@/api/newuser'
import { VUE_APP_BASE_API } from '@/config'

export default {
  data() {
    return {
      search: '',
      activeName: 'abnormal',
      tableData: {
        date:[null,null,null],
        list:[]
      },
      type: 1,
      street_type: null,
    };
  },
  components: { Warningtabs },
  mounted() {
    this.warningList()
  },
  methods: {
    getVisit(street_type) {
      this.street_type = street_type
      this.warningList()
    },
   warningList() {
      warningList({
        type: this.type,
        street_type: this.street_type,
      }).then(res => {
        // console.log(res);
        this.tableData = res
      })
    },
    handleClick(row) {
      // console.log(row);
    },
    TabsClick(el) {
      // console.log(el.index);
      this.type = Number(el.index) + 1
      this.warningList()
    },
    warningExport(){
      window.open(`${VUE_APP_BASE_API}/v1/company/warning_export?type=${this.type}`)
    }
  },
};
</script>

<style scoped lang="less">
::v-deep .el-tabs__item {
  padding: 0 62px;
  /*color: #3377FF;*/
  font-size: 16px;
}

::v-deep input {
  border-radius: 38px;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
}


::v-deep .el-input__icon {
  line-height: 38px;
  font-size: 16px;
}

.dc_b {
  padding: 7px 40px;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
}

.table_c {
  margin-top: 15px;
}

::v-deep .has-gutter tr th {
  font-size: 14px;
  font-weight: initial;
}

::v-deep .has-gutter tr th:nth-child(11) {
  text-align: center;
}

// :v-deep .has-gutter tr th:last-child {
//   text-align: center;
// }
::v-deep .el-table__row td {
  font-size: 14px;
}

::v-deep .el-table__row td:nth-child(3) .cell {
  // height: 90px ;
  line-height: 45px;
  padding: 0;
}

::v-deep .el-table__row td:nth-child(4) .cell {
  // height: 90px ;
  line-height: 45px;
  padding: 0;
}

::v-deep .el-table__row td:nth-child(3) .cell div:nth-child(1) {
  border-bottom: 1px solid #EBEEF5;
}

::v-deep .el-table__row td:nth-child(4) .cell div:nth-child(1) {
  border-bottom: 1px solid #EBEEF5;
}

.pj_div {
  color: #fff;
  background-color: #ff5f55;
  padding: 4px;
  border-radius: 5px;
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
